<template>
	<div class="graph-container">
		<div id="graph" style="position: relative"></div>
		<div id="miniMapId"></div>
		<div v-if="config.noDataFlag || itRoadData.nodes.length == 0" class="no-data">暂无数据</div>
	</div>
</template>

<script setup name="YdItRoad" lang="tsx">
import { reactive, onMounted } from 'vue';
import { GraphData, CustomOptionsType, GraphConfigType } from './graph-edit-type';
import G6 from '@antv/x6';
const props = defineProps<{
	config: GraphConfigType;
}>();

// const $emit = defineEmits(['dragNode', 'afterRender', 'clickNode', 'dblclickNode', 'graphInited']);

// g6 graph对象
// const graph = ref();
// // 防抖
// const debounce = reactive({
// 	// 频率(ms)
// 	time: 100,
// 	flag: true,
// });

// IT路径图数据 nodes 节点，edges边
const itRoadData = reactive<GraphData>({
	nodes: [],
	edges: [],
});

// graph图 默认配置
let defaultOptions = reactive<CustomOptionsType>({
	// 最小缩放比例
	minZoom: 0.5,
	// 最大缩放比例
	maxZoom: 2,
	// 布局配置项
	layout: {
		type: 'dagre',
		rankdir: 'LR',
		nodesep: 50,
		ranksep: 100,
	},
	modes: {
		// 默认模式
		defaultMode: [
			// 拖拽画布
			'drag-canvas',
			// 缩放画布
			'zoom-canvas',
			// 节点高亮(自定义)
			'activate-node',
		],
		edit: [
			// 拖拽画布
			'drag-canvas',
			// 缩放画布
			'zoom-canvas',
			// 拖拽节点
			'drag-node',
			// 节点高亮(自定义)
		],
		editNoDragNode: [
			// 拖拽画布
			'drag-canvas',
			// 缩放画布
			'zoom-canvas',
			// 节点高亮(自定义)
			'activate-node',
		],
	},

	// 渲染方式 canvas或者svg
	renderer: 'canvas',
	toolbarObj: undefined,
});

onMounted(() => {});
</script>
<style scoped>
:deep(.svg-icon) {
	width: 1.5em;
	height: 1.5em;
}
</style>
<style rel="stylesheet/scss" lang="scss">
#miniMapId {
	position: absolute;
	width: 150px;
	height: 100px;
	top: 0;
}

.no-data {
	position: absolute;
	left: 49%;
	top: 49%;
	color: #ffffff70;
}

.graph-container {
	position: relative;

	.g6-component-toolbar {
		left: unset;
		right: 0;
		padding: 0;
		background-color: #ffffff00;
		border: 0;
		color: #ffffff;

		li {
			position: static;
		}

		i {
			font-size: 16px;
		}
	}
}
</style>
